<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib  uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib  uri="http://www.springframework.org/security/tags" prefix="sec" %>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="${sbase}/scripts/jquery-ui/css/flick/jquery-ui-1.9.2.custom.css" />

<link rel="stylesheet" type="text/css" href="${sbase}scripts/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="${sbase}scripts/bootstrap/css/bootstrap-responsive.css"/>  
<script type="text/javascript" src="${sbase}/scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${sbase}scripts/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
<title>添加计划项</title>
</head>
<body>
<div class="btn-group">
		<button id="rbtn" class="btn btn-info" type="button">请选择部门</button>
		<button class="btn dropdown-toggle btn-info" data-toggle="dropdown">
		<span class="caret"></span>
		</button>
		<ul id="deptlist" class="dropdown-menu"></ul>
</div>
<form>	
<table  class="table table-bordered table-hover table-condensed">
<caption>选择部门</caption>
<thead>
</thead>
<tbody>
<tr>
  <th width="150">代码</th>
  <td><input id="code" type="text" /></td>
</tr>
<tr>
  <th>名称</th>
  <td><input id="name" type="text" readonly /></td>
</tr>
<tr>
  <th>单位</th>
  <td><input id="unit" type="text" readonly/></td>
</tr>
<tr>
  <th>数量</th>
  <td><input id="consume" type="text" /></td>
</tr>
<tr>
  <th>备注</th>
  <td>
  <textarea id="remark"></textarea>
  
  </td>
</tr>
</tbody>
<tfoot>
  <tr>
  <td></td>
  <td>
    <button class="btn btn-info" type="button" onclick="addline();">添加计划项</button>
    <button class="btn" type="button" onclick="window.close()">关闭</button>
  </td>
  </tr>
</tfoot>
</table>
</form>

<script type="text/javascript">
var pant = window.dialogArguments; 
var seldept = null;
$(function(){
	initiDepartments("deptlist");
	setAutoComplate($("#code"));
});
function initiDepartments(deptId) {
	var depts = $("#"+deptId);
	$.getJSON(
					"../admin/department/department!bytype",
					{
						"bean.id" : "root",
						"bean.departmentType" : "Manufacture"
					},
					function(data, textStatus, jqXHR) {

						$.each(data,function(i, item) {
							   var ipt = $("<li did='"+item['id']+"' dname='"+item['name']+"'><a href='#'>"+item['name']+"</a></li>");
							   ipt.bind("click",function(){
							     	departmentClicked($(this).attr("did"),$(this).attr("dname"));
							   });
							   depts.append(ipt);	

										
						});
						
					});

	

}

function addline(){
	pant.addItem(
			$("#code").val(),
			$("#name").val(),
			$("#unit").val(),
			$("#consume").val(),
			$("#remark").text()		
			
	
	);
	$("form").get(0).reset();
}

function departmentClicked(dept, dname) {
	seldept = dept;
	$("#rbtn").html(dname);	
	$("form").get(0).reset();
}


/**
 * @param obj
 *            jQuery object
 */
function setAutoComplate(obj) {
    obj.autocomplete({
		minLength : 3,
		source : function(request, response) {
			var term = request.term;
			$.getJSON("../product/product!search", {
				"term" : term,
				"department.id" : seldept
			}, function(data, status, xhr) {
				response(data);
			});
		},
		focus : function(event, ui) {
			obj.val(ui.item.code);
			return false;
		},
		select : function(event, ui) {
			obj.val(ui.item.code);
			$("#name").val(ui.item.name);
			$("#unit").val(ui.item.priceUnit);			
			return false;
		}

	}).data("autocomplete")._renderItem = function(ul, item) {
		return $("<li></li>").data("item.autocomplete", item).append(
				"<a>" + item.code + "|" + item.name + "</a>").appendTo(ul);
	};
}
</script>
<script type="text/javascript" src="${sbase}scripts/bootstrap/js/bootstrap.js"> </script>
</body>
</html>